import { resourcePath } from "../../../../../../../utils/resource";
import { Button,Table } from "antd";
import { CloseOutlined } from "@ant-design/icons";
import { useEffect,useState } from "react";
import CztApi from "../../../../../../../utils/apis/CztApi";
import { fromCircle } from "ol/geom/Polygon";
export default function XqDetail(props){
     const {newType,result,cztxl,jzzyxl,wkt,onUpdateXqList}=props;
    const [data,setData]=useState();
   console.log('data',data)
   
    
    useEffect(()=>{
        if(newType === 'czt'){
             CztApi.cztxq(cztxl,fromCircle(wkt)).then(resp=>{
            setData(resp.data);
        })
        }else{
            CztApi.jzzyxq(jzzyxl,fromCircle(wkt)).then(resp=>{
                setData(resp.data);
            })
        }
       
    },[cztxl,jzzyxl,wkt,newType])
    // console.log(data)
    const handleClick=(record)=>{
        onUpdateXqList(record)
    }
   
    return <>
     <div style={{
            width: 350,
            position: "absolute",
            right: 30,
            top: 30,
            bottom: 30,
            background: 'rgba(1,15,31,0.5)',
            // border: '1px solid rgba(9,107,225,0.8)',
            pointerEvents: 'auto',
            overflow: "auto",
            borderRadius: 8
        }} className="layout-v">
            <div style={{
                fontSize: 20,
                fontWeight: "bold",
                marginBottom: 12
            }} className='layout-h center'>
                <div className='fill w0'>
                    <div style={{
                        background: `url(${resourcePath.blockTitleBg})`,
                        height: 36,
                        backgroundSize: '100% 100%',
                        fontSize: 18,
                        lineHeight: '36px',
                        paddingLeft: 12,
                        fontWeight: "bold",
                        overflow: "hidden"
                    }} title={newType === 'czt'?'承载体':'减灾资源'}>
                        {newType === 'czt'?'承载体':'减灾资源'}
                    </div>
                </div>
                <div>
                    <Button size="small" icon={<CloseOutlined />} style={{
                        // color: "#fff"
                    }} onClick={e => {
                        props?.onClose?.()
                    }} />
                </div>
            </div>
            <Table style={{marginTop:10}}
            columns={[{
                title:'名称',
                dataIndex:'title'
            },{
                width:80,
                render:(text,record)=>{
                    return <Button size="small" type="link" onClick={()=>handleClick(record)}>详情</Button>
                }
            }
        
    ]}
            dataSource={data}/>
            </div>
    </>
}